<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <!-- 
    事件处理器的两种类型：
      1. 内联事件处理器
        v-on:click="count++"

        ||

        v-on:click="() => count++"
      2. 方法事件处理器
        v-on:click="fn1"
        fn1 是在 methods 声明的一个方法

    事件处理器调用一个方法时，写括号与不写括号的区别
      fn1 是在 methods 声明的一个方法

      1. v-on:click="fn1"
        fn1函数会自动接受一个事件对象做为参数
      2. v-on:click="fn1()"
        fn1函数接收的参数是看这里括号中写的啥

    当事件处理其的方法加了括号时，如何获取事件对象呢？
      1. 使用特殊变量 $event
        v-on:click="fn2($event)"
      2. 完整的写好箭头函数，箭头函数会接受到 event 事件对象，然后将 event 传递下去
        v-on:click="(event) => fn2(event)"
   -->
  <div id="app">
    <button @click="fn1">fn1</button>
    <button @click="fn1()">fn1()</button>
    <button @click="() => fn1()">fn1() 变形</button>

    <hr />
    <button @click="fn2($event)">fn2()</button>
    <button @click="(event) => fn2(event)">fn2() 变形</button>
  </div>

  <script type="module">
    import { createApp } from './lib/vue3.esm.browser.js'

    createApp({
      methods: {
        fn1(arg1) {
          console.log('fn1', arg1)
        },

        fn2(event) {
          console.log('fn2', event)
        }
      }
    }).mount('#app')
  </script>
</body>

</html>